define([
  'jquery',
  'underscore',
  'backbone',
  'models/appointment',
  'views/appointment/event-form',
  'fullCalendar'
//  'text!templates/post/list.html',
//  'app'
  ], function($, _, Backbone,Appointment,EventView) {

  return Backbone.View.extend({

    //template : _.template(template),
    tagName:"div", // Not required since 'div' is the default if no el or tagName specified
    eventView:new EventView,

      initialize:function () {
          //this.collection.bind("change", this.render, this);
		  _.bindAll(this);
		  this.collection.bind('reset', this.addAll,this);
		  this.collection.bind('change', this.change,this.eventView.model);
          this.collection.bind('add', this.addOne,this.eventView.model);
          //var eventView=new EventView;
          $("#eventDialog").html(this.eventView.render().el);

      },
      addOne:function(event){
		  //console.log(event.toJSON());		  
          $(this.el).fullCalendar('renderEvent', event.toJSON());
      },
      addAll: function(){
         $(this.el).fullCalendar('addEventSource', this.collection.toJSON());
      },
	  
	  change: function(event) {
		  var fcEvent = $(this.el).fullCalendar('clientEvents', event.get('id'))[0];
		  if(fcEvent!=undefined){
			  fcEvent.title = this.eventView.model.get('title');
			  //fcEvent. = this.eventView.model.get('color');
			  $(this.el).fullCalendar('updateEvent', fcEvent);
		  }
		  
	  },
	  
      render:function (eventName) {
//          $(this.el).html(this.template(this.model.toJSON()));
          $(this.el).fullCalendar({
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay',
                  ignoreTimezone: false
              },
              selectable: true,
              selectHelper: true,
              editable: true,
              select: this.select,
              eventClick: this.eventClick,
			  eventDrop: this.eventDropOrResize,
			  eventResize: this.eventDropOrResize,
              events: this.collection.toJSON()
          });



          return this;
      },
	  
	  eventDropOrResize: function(fcEvent) {
		//console.log(fcEvent);
		this.eventView.model = this.collection.get(fcEvent.id);
		//console.log(fcEvent.start);
		this.eventView.model.save({
			start: $.fullCalendar.formatDate(fcEvent.start,'yyyy-MM-dd HH:mm:ss'), 
			end: $.fullCalendar.formatDate(fcEvent.end,'yyyy-MM-dd HH:mm:ss')
			});
	  },
	  
	  
      select: function(startDate, endDate) {
          //new MessageListItemView({model:message}).render().el
          //this.eventView;
          //$("#eventDialog").html(eventView.render().el);
          this.eventView.collection = this.collection;
          this.eventView.model = new Appointment({
			start: $.fullCalendar.formatDate(startDate,'yyyy-MM-dd HH:mm:ss'), 
			end: $.fullCalendar.formatDate(endDate,'yyyy-MM-dd HH:mm:ss'),
			allDay:false
			});
		  //console.log($.fullCalendar.formatDate(startDate,'u'));
          this.eventView.renderPopup().el;
      },
      eventClick: function(fcEvent) {
          this.eventView.model = this.collection.get(fcEvent.id);
          //this.eventView.render();
          this.eventView.renderPopup().el;
      },



      /*renderItem: function(model) {
        var itemView = new PostItemView({model:model});
        this.$('ul').append(itemView.el);
      },*/

    /*error: function(model, response) {
      App.vent.trigger('alert', {
        msg: response.responseText ? response.responseText : response.statusText,
        type: 'error'
      });
    },*/

    close: function() {
      this.undelegateEvents();
      this.collection.off('error', this.error);
      this.remove();
    }
  });
});
